我曾尝试在我的游戏或开始菜单中放置一个开始按钮，但每次我尝试时，我的游戏都会停止工作，我尝试了很多我在网上找到的东西，但每次它都发送了工作我的游戏就这样消失了。
我的游戏是一个用 javascript 编写的贪吃蛇游戏，我试图将其插入到我的网页中，我在网上找到了该脚本，我的编码不是很好。我才刚刚开始。 我知道一些事情并且我每天都在学习，但我仍然认为自己是一个菜鸟。
这是脚本 我想把开始按钮放在游戏前面
我的脚本以//body onload="init()"开头 body onload，我在网上看到的例子中没有看到它
function init() {
var ctx;
var turn = [];
var xV = [-1, 0, 1, 0];
var yV = [0, -1, 0, 1];
var queue = [];
var elements = 1;
var map = [];
var X = 5 + (Math.random() * (45 - 10)) | 0;
var Y = 5 + (Math.random() * (30 - 10)) | 0;
var direction = Math.random() * 3 | 0;
var interval = 0;
var score = 0;
var inc_score = 50;
var sum = 0, easy = 0;
var i, dir;
var canvas = document.createElement('canvas');
for (i = 0; i < 45; i++) {
map[i] = [];
}
canvas.setAttribute('width', 45 * 10);
canvas.setAttribute('height', 30 * 10);
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function placeFood() {
var x, y;
do {
x = Math.random() * 45 | 0;
y = Math.random() * 30 | 0;
} while (map[x][y]);
map[x][y] = 1;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
}
placeFood();
function clock() {
if (easy) {
X = (X + 45) % 45;
Y = (Y + 30) % 30;
}
--inc_score;
if (turn.length) {
dir = turn.pop();
if ((dir % 2) !== (direction % 2)) {
direction = dir;
}
}
if (
(easy || (0 <= X && 0 <= Y && X < 45 && Y < 30))
&& 2 !== map[X][Y]) {
if (1 === map[X][Y]) {
score += Math.max(5, inc_score);
inc_score = 50;
placeFood();
elements++;
}
ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
map[X][Y] = 2;
queue.unshift([X, Y]);
X += xV[direction];
Y += yV[direction];
if (elements < queue.length) {
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if (!turn.length) {
if (confirm("nice try,keep winning satoshis ! Play again? Your Score is " + score)) {
ctx.clearRect(0, 0, 450, 300);
queue = [];
elements = 1;
map = [];
X = 5 + (Math.random() * (45 - 10)) | 0;
Y = 5 + (Math.random() * (30 - 10)) | 0;
direction = Math.random() * 3 | 0;
score = 0;
inc_score = 50;
for (i = 0; i < 45; i++) {
map[i] = [];
}
placeFood();
} else {
window.clearInterval(interval);
window.location = "/projects/";
}
}
}
interval = window.setInterval(clock, 60);
document.onkeydown = function (e) {
var code = e.keyCode - 37;
/*
* 0: left
* 1: up
* 2: right
* 3: down
**/
if (0 <= code && code < 4 && code !== turn[0]) {
turn.unshift(code);
} else if (-5 == code) {
if (interval) {
window.clearInterval(interval);
interval = null;
} else {
interval = window.setInterval(clock, 60);
}
} else { // O.o
dir = sum + code;
if (dir == 44 || dir == 94 || dir == 126 || dir == 171) {
sum += code
} else if (dir === 218) easy = 1;
}
}
}
最佳答案
这样好吗？
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style>
canvas {
border: 1px solid;
}
#btn {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<input type="button" value="Start" onclick="init()" id="btn" />
<script>
function init()
{
var ctx;
var turn = [];
var xV = [-1, 0, 1, 0];
var yV = [0, -1, 0, 1];
var queue = [];
var elements = 1;
var map = [];
var X = 5 + (Math.random() * (45 - 10)) | 0;
var Y = 5 + (Math.random() * (30 - 10)) | 0;
var direction = Math.random() * 3 | 0;
var interval = 0;
var score = 0;
var inc_score = 50;
var sum = 0, easy = 0;
var i, dir;
var canvas = document.createElement('canvas');
for (i = 0; i < 45; i++)
{
map[i] = [];
}
canvas.setAttribute('width', 45 * 10);
canvas.setAttribute('height', 30 * 10);
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function placeFood()
{
var x, y;
do
{
x = Math.random() * 45 | 0;
y = Math.random() * 30 | 0;
} while (map[x][y]);
map[x][y] = 1;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
}
placeFood();
function clock()
{
if (easy)
{
X = (X + 45) % 45;
Y = (Y + 30) % 30;
}
--inc_score;
if (turn.length)
{
dir = turn.pop();
if ((dir % 2) !== (direction % 2))
{
direction = dir;
}
}
if (
(easy || (0 <= X && 0 <= Y && X < 45 && Y < 30))
&& 2 !== map[X][Y])
{
if (1 === map[X][Y])
{
score += Math.max(5, inc_score);
inc_score = 50;
placeFood();
elements++;
}
ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
map[X][Y] = 2;
queue.unshift([X, Y]);
X += xV[direction];
Y += yV[direction];
if (elements < queue.length)
{
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if (!turn.length)
{
if (confirm("nice try,keep winning satoshis ! Play again? Your Score is " + score))
{
ctx.clearRect(0, 0, 450, 300);
queue = [];
elements = 1;
map = [];
X = 5 + (Math.random() * (45 - 10)) | 0;
Y = 5 + (Math.random() * (30 - 10)) | 0;
direction = Math.random() * 3 | 0;
score = 0;
inc_score = 50;
for (i = 0; i < 45; i++)
{
map[i] = [];
}
placeFood();
} else
{
window.clearInterval(interval);
window.location = "/projects/";
}
}
}
interval = window.setInterval(clock, 60);
document.onkeydown = function (e)
{
var code = e.keyCode - 37;
if (0 <= code && code < 4 && code !== turn[0])
{
turn.unshift(code);
} else if (-5 == code)
{
if (interval)
{
window.clearInterval(interval);
interval = null;
} else
{
interval = window.setInterval(clock, 60);
}
} else
{ // O.o
dir = sum + code;
if (dir == 44 || dir == 94 || dir == 126 || dir == 171)
{
sum += code
} else if (dir === 218) easy = 1;
}
}
}
</script>
</body>关于javascript - 试图在 javascript 游戏蛇游戏中放置一个开始按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41914295/