[英]How can I restart this game using the button at the top?
I'm trying to make a simple snake game and so far most of it works, except restarting the game after the user has failed. 我正在尝试制作一个简单的蛇游戏,到目前为止,大多数游戏都可以运行,除了在用户失败后重新启动游戏。 I've added a button to the top and I'm hoping that a user can click the button to restart the game.
我在顶部添加了一个按钮,希望用户可以单击该按钮重新启动游戏。
Here is the HTML 这是HTML
<head>
<meta charset="UTF-8">
<title>Snake</title>
</head>
<body>
<input type="button" id="restart" value="restart" style="font: normal 30px
monospace; color: white; background-color: blue;">Restart</input>
<h1 id="score" style="font: normal 50px monospace; color: white;">Score:
</h1>
</body>
the CSS CSS
*{
padding: 0;
margin: 0;
}
body{
background-color: black;
}
td{
width: 20px;
height: 20px;
}
.blank{
background-color: blank;
}
.snake{
background-color: white;
border-radius: 50%;
}
.wall{
background-color: #cf1020;
}
.fruit{
background-color: gold;
border-radius: 50%;
}
The javaScript Java脚本
//settings
var snakeX = 2;
var snakeY = 2;
var height = 28;
var width = 50;
var interval = 100;
var increment = 1;
//game variables
var length = 0;
var tailX = [snakeX];
var tailY = [snakeY];
var fX;
var fY;
var running = false;
var gameOver = false;
var direction = -1; // up = 0, down = -1, left = 1, right = 2
var int;
var score = 0;
//temporary direction (this fixes users pressing keys too quickly and
turning into themselves)
var tempdir = direction;
/**
* entry point of the game
*/
function run(){
init();
int = setInterval(gameLoop, interval);
}
function init(){
createMap();
createSnake();
createFruit();
}
/**
* Generates the map for the snake
*/
function createMap(){
document.write("<table>");
for( var y = 0; y < height; y++){
document.write("<tr>");
for( var x = 0; x < width; x++){
if(x == 0 || x == width -1 || y == 0 || y == height -1){
document.write("<td class='wall' id='"+ x + "-" + y +"'></td>");
}else{
document.write("<td class='blank' id='"+ x + "-" + y +"'>
</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
}
function createSnake(){
set(snakeX, snakeY, "snake");
}
function get(x,y){
return document.getElementById(x+"-"+y);
}
function set(x,y,value){
if(x != null && y != null)
get(x,y).setAttribute("class", value);
}
function rand(min,max){
return Math.floor(Math.random() * (max - min) + min);
}
function getType(x,y){
return get(x,y).getAttribute("class");
}
function createFruit(){
var found = false;
while(!found && (length < (width-2)*(height-2)+1)){
var fruitX = rand(1,width-1);
var fruitY = rand(1,height-1);
if(getType(fruitX, fruitY) == "blank")
found = true;
}
set(fruitX, fruitY, "fruit");
fX = fruitX;
fY = fruitY;
}
/**
* NOTE: notice use of new variable tempdir
*/
window.addEventListener("keypress", function key(event){
//if key is W set direction up
var key = event.keyCode;
if(direction != -1 && (key == 119 || key == 87))
tempdir = 0;
//if key is S set direction down
else if(direction != 0 && (key == 115 || key == 83))
tempdir = -1;
//if key is A set direction left
else if(direction != 2 && (key == 97 || key == 65))
tempdir = 1;
//if key is D set direction right
else if(direction != 1 && (key == 100 || key == 68))
tempdir = 2;
if(!running)
running = true;
else if(key == 32)
running = false;
});
function gameLoop(){
if(running && !gameOver){
update();
}else if(gameOver){
clearInterval(int);
}
}
/**
* NOTE: notice use of new variable tempdir
*/
function update(){
direction = tempdir;
//prevents fruit from not showing up
set(fX, fY, "fruit");
//update the tail
updateTail();
//sets the last segment of the tail to blank before moving the snake
set(tailX[length], tailY[length], "blank");
//updates the position of the snake according to the direction
if(direction == 0)
snakeY--;
else if(direction == -1)
snakeY++;
else if(direction == 1)
snakeX--;
else if(direction == 2)
snakeX++;
//draws the head of the snake on the tail
set(snakeX, snakeY, "snake");
//checks for collisions with self
for(var i = tailX.length-1; i >=0; i--){
if(snakeX == tailX[i] && snakeY == tailY[i]){
gameOver = true;
break;
}
}
//checks for collision with wall
if(snakeX == 0 || snakeX == width-1 || snakeY == 0 || snakeY == height-1)
gameOver = true;
//checks for collisions with fruit
else if(snakeX == fX && snakeY == fY){
//adds 1 to the score
score+=1;
//creates new fruit, which automatically replaces the old one
createFruit();
//adds the set increment to the length of the snake making it longer
length+=increment;
}
//set
document.getElementById("score").innerHTML = "Score: "+ score;
}
function updateTail(){
for(var i = length; i > 0; i--){
tailX[i] = tailX[i-1];
tailY[i] = tailY[i-1];
}
tailX[0] = snakeX;
tailY[0] = snakeY;
}
run();
The Codepen Codepen
https://codepen.io/McComb/pen/EoYVRY https://codepen.io/McComb/pen/EoYVRY
Not sure what requirements you have for this project, but i added jQuery to ease my work in it. 不知道您对该项目有什么要求,但是我添加了jQuery来简化我的工作。
i added a new div in the body 我在体内添加了一个新的div
<div id="canvas"></div>
i changed your createMap method with this : 我用此更改了您的createMap方法:
/**
* Generates the map for the snake
*/
function createMap(){
var canvas;
canvas = '<table>';
for( var y = 0; y < height; y++){
canvas += "<tr>";
for( var x = 0; x < width; x++){
if(x == 0 || x == width -1 || y == 0 || y == height -1){
canvas += "<td class='wall' id='"+ x + "-" + y +"'></td>";
}else{
canvas += "<td class='blank' id='"+ x + "-" + y +"'></td>";
}
}
canvas += "</tr>" ;
}
$('#canvas').html(canvas);
}
and added a reset method 并添加了重置方法
function reset()
{
//settings
snakeX = 2;
snakeY = 2;
height = 28;
width = 50;
interval = 100;
increment = 1;
//game variables
length = 0;
tailX = [snakeX];
tailY = [snakeY];
running = false;
gameOver = false;
direction = -1; // up = 0, down = -1, left = 1, right = 2
score = 0;
//temporary direction (this fixes users pressing keys too quickly and turning into themselves)
tempdir = direction;
clearInterval(int);
run();
// reset score
$('#score').text('Score: '+score);
}
here is the project with the changes : https://codepen.io/anon/pen/vpBKyL 这是带有更改的项目: https : //codepen.io/anon/pen/vpBKyL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.