Use js to write a simple snake game
|
This article shares the specific code of a simple snake game written in js for your reference. The specific content is as follows The code is as follows:HTML 5 Part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greedy Snake</title>
<style>
#scence{
width: 800px;
height: 600px;
border: 1px solid #000;
margin: 50px auto;
background-color: aliceblue;
position: relative;
overflow: hidden;
}
.head{
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
}
.tail{
position: absolute;
width: 20px;
height: 20px;
background-color: grey;
}
</style>
</head>
<body>
<div id="scence">
</div>
</body>
</html>
<script src="tools.js"></script>
<script src="../贪吃蛇/snake.js"></script>
<script src="food.js"></script>
<script src="game.js"></script>js part tools.js
function getStyle(ele, styleObj) {
for (const key in styleObj) {
ele.style[key] = styleObj[key];
}
}
function getRandom(a, b) {
return Math.floor(Math.random() * (b - a) + a +1)
}snake.js
function Snake() {
this.scence = document.querySelector('#scence');
this.body = [
[0, 0, 'grey', null],
[0, 1, 'grey', null],
[0, 2, '#000', null]
];
this.dir = 'right';
this.lastdir = 'right';
this.width = 20;
this.height = 20;
this.scence_w = scence.offsetWidth;
this.scence_h = scence.offsetHeight;
}
Snake.prototype.found = function () {
for (let i = 0; i < this.body.length; i++) {
if (this.body[i][3] == null) {
this.body[i][3] = document.createElement('div');
}
getStyle(this.body[i][3], {
width: this.width + 'px',
height: this.height + 'px',
position: 'absolute',
top: this.height * (this.body[i][0]) + 'px',
left: this.width * (this.body[i][1]) + 'px',
backgroundColor: this.body[i][2]
});
this.scence.appendChild(this.body[i][3]);
}
}
//Movement function Snake.prototype.move = function () {
var length = this.body.length;
for (let i = 0; i < length - 1; i++) {
this.body[i][0] = this.body[i + 1][0];
this.body[i][1] = this.body[i + 1][1];
}
let snakehead = this.body[length - 1]
switch (this.dir) {
case 'right':
snakehead[1] += 1;
break;
case 'left':
snakehead[1] -= 1
break;
case 'up':
snakehead[0] -= 1
break;
case 'down':
snakehead[0] += 1
break;
}
this.lastdir = this.dir;
snake.found();
}
// Timing movement Snake.prototype.shift = function () {
document.onkeydown = (e) => {
e = e || window.event;
let key = e.keyCode;
switch (key) {
case 39:
if (this.lastdir == 'left') {
this.dir = 'left'
} else {
this.dir = 'right'
};
break;
case 37:
if (this.lastdir == 'right') {
this.dir = 'right'
} else {
this.dir = 'left'
};
break;
case 38:
if (this.lastdir == 'down') {
this.dir = 'down'
} else {
this.dir = 'up'
};
break;
case 40:
if (this.lastdir == 'up') {
this.dir = 'up'
} else {
this.dir = 'down'
};
break;
}
}
}
//Game over Snake.prototype.over = function () {
let top = this.body[this.body.length - 1][0];
let left = this.body[this.body.length - 1][1];
let width = this.scence_w / this.width - 1;
let height = this.scence_w / this.height - 1;
if (top < 0 || left < 0 || top > width || left > height) {
clearInterval(timeid)
alert('game over');
}
for (let i = 0; i < this.body.length - 1; i++) {
if (top == this.body[i][0] && left == this.body[i][1]) {
clearInterval(timeid)
alert('game over');
}
}
}
let snake = new Snake();
snake.found();
snake.shift();
timeid = setInterval(function () {
snake.move();
food.eat();
snake.over()
}, 100)food.js
function Food() {
this.scence = document.querySelector('#scence');
this.width = 20;
this.height = 20;
this.body = [-1, -1, 'red', null];
this.scence_w = scence.offsetWidth;
this.scence_h = scence.offsetHeight;
}
//Food generation Food.prototype.crteate = function () {
this.body[1] = getRandom(0, this.scence_w / this.width-1);
this.body[0] = getRandom(0, this.scence_h / this.height-1);
this.body[3] = document.createElement('div');
getStyle(this.body[3], {
width: this.width + 'px',
height: this.height + 'px',
position: 'absolute',
top: this.height * (this.body[0] ) + 'px',
left: this.width * (this.body[1] ) + 'px',
backgroundColor: this.body[2],
borderRadius: '50%',
});
this.scence.appendChild(this.body[3]);
}
//The snake eats the food Food.prototype.eat=function(){
// const new = [0, 0, 'grey', null]
if(snake.body[snake.body.length-1][0]==this.body[0] && snake.body[snake.body.length-1][1]==this.body[1]){
this.scence.removeChild(this.body[3]);
this.crteate();
snake.body.unshift([-1,-1,"grey",null])
}
}
let food = new Food();
food.crteate();
food.eat();The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of the usage and differences of MySQL views and indexes
>>: Detailed explanation of Linux redirection usage
Recommend
Solution to Chinese garbled characters when operating MySQL database in CMD
I searched on Baidu. . Some people say to use the...
How to solve the problem that the website does not allow direct copying of page content or information
Nowadays, many websites do not allow direct copyin...
Install mysql 5.6 from yum source in centos7.4 system
System environment: centos7.4 1. Check whether th...
Detailed explanation of Linux command file overwrite and file append
1. The difference between the command > and &g...
Let you understand the working principle of JavaScript
Table of contents Browser kernel JavaScript Engin...
How to draw a cool radar chart in CocosCreator
Table of contents Preface Preview text Graphics C...
Implementation steps for installing Redis container in Docker
Table of contents Install Redis on Docker 1. Find...
Build a Scala environment under Linux and write a simple Scala program
It is very simple to install Scala environment in...
Summary of some tips on MySQL index knowledge
Table of contents 1. Basic knowledge of indexing ...
Introduction to TypeScript interfaces
Table of contents 1. Interface definition 2. Attr...
VMware installation of CentOS virtual machine and configuration network graphic tutorial
1. Download the CentOS image 1.1 Download website...
Do you know the common MySQL design errors?
Thanks to the development of the Internet, we can...
Detailed process of building nfs server using Docker's NFS-Ganesha image
Table of contents 1. Introduction to NFS-Ganesha ...
How to set up the terminal to run applications after Ubuntu starts
1. Enter start in the menu bar and click startup ...
The problem of being unable to enter the management page when installing rabbitmq in docker
1. Environmental Preparation Tencent Cloud Server...