Native js to realize a simple snake game
|
This article shares the specific code of js to implement the snake game for your reference. The specific content is as follows First picture
Without further ado, here is the code. If you like it, please leave your little stars♥(ˆ◡ˆԅ)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.l {
float: left;
}
.r {
float: right;
}
.clear_fix::after {
content: '';
height: 0;
width: 100%;
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
}
.body {
margin: 50px 0 0 50px;
width: 700px;
}
.cont {
width: 500px;
height: 500px;
border: 1px solid green;
margin-right: 8px;
position: relative;
}
.cont div {
position: absolute;
width: 10px;
height: 10px;
background-color: orange;
border: 1px solid #000;
box-sizing: border-box;
}
.cont .snakeHead {
border-radius: 50%;
}
.cont span {
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #000;
box-sizing: border-box;
border-radius: 50%;
background: green;
}
.score {
width: 188px;
height: 500px;
border: 1px solid red;
}
.score p {
text-align: center;
height: 50px;
line-height: 50px;
font-size: 30px;
margin: 20px 0;
color: brown
}
.score .time{
color:chartreuse;
font-size: 20px;
}
.btn {
margin-left: 50px
}
.btn .active {
background-color: green;
}
button {
width: 100px;
height: 30px;
font-size: 24px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="body clear_fix">
<div class="cont l">
</div>
Score:
</br>
<p>0 points</p>
<hr>
time:
<p class="time"></p>
</div>
</div>
<div class="btn">
<button>Start</button>
<button class="active">Normal</button>
<button>Difficult</button>
<button>Hell</button>
</div>
</div>
<script>
var snake = {
/* Initialize global events, add initial event listener*/
init: function () {
this.btns = document.querySelectorAll('button');
this.score = document.querySelector('p');
this.cont = document.querySelector('.cont');
//Container for time display this.time = document.querySelector('.time');
//Direction of the snake, 'r' means right this.dir = 'r';
/* Timer */
this.timer = '';
/* Initial snake head position */
this.head = {
l: 30,
t: 10
}
//Snake tail this.ender = {
l: '',
t: ''
};
this.foodItem = {
l: '',
t: ''
};
//Starting state this.isStart = false;
/* Score counter */
this.counter = 0;
//Easy status is 1, difficult is 2, hell is 3
this.status = 1;
this.speed = 10
this.btns[0].onclick = this.startFn //Start or pause this.btns[1].onclick = this.simpleFn //Simple mode listening this.btns[2].onclick = this.difcultFn //Difficult mode listening this.btns[3].onclick = this.hardFn //Hell mode listening this.initCreate();
this.getTime()
//A random food this.getfood()
},
initCreate() {
//Create an initial snake head and 3 snake bodies for (let i = 0; i <= 3; i++) {
let item = document.createElement('div');
Object.assign(item.style, {
left: this.head.l - 10 * i + 'px',
top: this.head.t + 'px',
/* borderRaduis: '50%' */
})
if (i == 0) {
item.className = 'snakeHead'
}
snake.cont.appendChild(item);
}
},
/* Add a section of the snake body*/
createSnake: function (obj) {
clearInterval(snake.timer)
var div = document.createElement('div');
div.style.left = snake.ender.l;
div.style.top = snake.ender.t;
snake.cont.appendChild(div);
console.log(snake.cont.children);
snake.move();
/* console.log(snake.cont); */
},
/* Check if it is the start time*/
startFn: function () {
if (!snake.isStart) {
snake.move();
snake.btns[0].innerHTML = 'Pause';
snake.isStart = true;
} else {
snake.stop();
snake.btns[0].innerHTML = 'Start';
snake.isStart = false;
}
},
/* Start moving, core module*/
move: function () {
document.onkeydown = snake.controlFn;
var itemsAll = snake.cont.children;
/* console.log(itemsAll);
console.log(itemsAll,itemsAll[0].nodeName); */
/* Array to store each section of the snake body*/
var items = [];
var span;
/* var items = Array.from(itemsAll).filter(function (v, k) {
return v.nodeName === 'DIV'
}); */
/* console.log(items); */
/* Filter div (snake body) and span (food) */
for (var j = 0; j < itemsAll.length; j++) {
if (itemsAll[j].nodeName == 'DIV') {
items.push(itemsAll[j])
} else {
span = itemsAll[j]
}
}
/* Get the position of the snake head */
var l = snake.head.l;
var t = snake.head.t;
console.log(l, t);
console.log(items)
clearInterval(snake.timer)
/* Keyboard monitoring */
document.onkeydown = snake.controlFn
/* Start moving */
snake.timer = setInterval(function () {
/* Record the position of the snake's tail and update it to the object storing the snake's tail*/
snake.ender.l = items[items.length - 1].style.left;
snake.ender.t = items[items.length - 1].style.top;
/* Update the snake's position*/
for (var i = items.length - 1; i > 0; i--) {
items[i].style.left = items[i - 1].style.left;
items[i].style.top = items[i - 1].style.top;
}
/* Determine the direction of the snake head and update its position*/
if (snake.dir == 'l') {
l -= snake.speed;
}
if (snake.dir == 'r') {
l += snake.speed;
}
if (snake.dir == 't') {
t -= snake.speed;
}
if (snake.dir == 'b') {
t += snake.speed;
}
/* Out of boundary y */
if (l < 0 || l > 490 || t < 0 || t > 490) {
clearInterval(snake.timer)
snake.reStart(confirm('Snake monster, you hit the wall! Do you want to start over?'))
}
items[0].style.left = l + 'px';
items[0].style.top = t + 'px';
/* Update the object that records the snake head*/
snake.head.l = l
snake.head.t = t
/* console.log(items[0].style); */
/* Insert snake head */
snake.cont.appendChild(items[0])
for (var k = 1; k < items.length; k++) {
/* Determine whether the snake head has bitten itself*/
if (items[0].style.left == items[k].style.left && items[0].style.top == items[k]
.style.top) {
snake.reStart(confirm('Snake monster, you bit yourself to death, do you want to start over?'))
/* console.log(items[0].style.left,items[0].style.top);
console.log(items[0].style.left,items[0].style.top); */
clearInterval(snake.timer)
/* alert('Game Over!');
window.location.reload(true) */
return
}
/* Insert the snake body */
snake.cont.appendChild(items[k])
}
/* Ate the food */
console.log(span.style.left, span.style.top);
/* console.log(l, 'eat the food'); */
if (l == parseInt(span.style.left) && t == parseInt(span.style.top)) {
snake.eat()
}
}, parseInt(300 / snake.status))
},
eat() {
snake.createSnake()
snake.getfood()
snake.counter++;
snake.score.innerHTML = `${snake.counter*100} points`
},
/* Game ends and determines whether to restart*/
reStart: function (value) {
if (value) {
window.location.reload(true)
}
},
/* Produce food */
getfood: function () {
if (document.querySelector('span')) {
console.log('come in');
document.querySelector('span').remove();
}
var span = document.createElement('span');
var l = snake.randM(0, 49) * 10
var t = snake.randM(0, 49) * 10
console.log('get food', l, t);
span.style.left = l + 'px';
span.style.top = t + 'px';
snake.cont.appendChild(span);
if (snake.isStart) {
snake.move()
}
},
/* Generate random numbers */
getTime() {
let time,h,m,s
setInterval(function () {
time = new Date()
h = time.getHours()
m = time.getMinutes();
s = time.getSeconds();
if (h < 10) {
h = '0' + h
}
if (m < 10) {
m = '0' + m
}
if (s < 10) {
s = '0' + s
}
snake.time.innerHTML = `${h}: ${m}: ${s}`
}, 1000)
},
randM: function (min, max) {
return Math.round(Math.random() * (max - min) + min)
},
/* pause*/
stop: function () {
clearInterval(snake.timer)
},
/* Simple mode */
simpleFn: function () {
snake.status = 1;
snake.btnFn()
snake.btns[1].className = 'active'
},
/* Complex mode */
differenceFn: function () {
snake.status = 3;
snake.btnFn()
snake.btns[2].className = 'active'
},
/* Hell Mode */
hardFn: function () {
snake.status = 5;
snake.btnFn()
snake.btns[3].className = 'active'
},
btnFn: function () {
snake.btns.forEach(function (v, k) {
v.className = ''
});
if (snake.isStart) {
snake.move();
}
},
/* Buttons to move the snake*/
controlFn: function (el) {
var el = el || window.event;
var code = el.keycode || el.which;
console.log(code);
if ((code == 40 || code == 83)&&snake.dir != 't') {
snake.dir = 'b'
}
if ((code == 39 || code == 68)&&snake.dir != 'l') {
snake.dir = 'r'
}
if ((code == 38 || code == 87)&&snake.dir != 'b') {
snake.dir = 't'
}
if ((code == 37 || code == 65)&&snake.dir != 'r') {
snake.dir = 'l'
}
}
}
snake.init();
</script>
</body>
</html>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:
|
<<: A detailed analysis of the murder caused by a misplaced double quote in MySQL
>>: Install Ubuntu 18 without USB drive under Windows 10 using EasyUEFI
Recommend
Who is a User Experience Designer?
Scary, isn't it! Translation in the picture: ...
Detailed steps for implementing timeout status monitoring in Apache FlinkCEP
CEP - Complex Event Processing. The payment has n...
Use the ip netns command in Linux to isolate the network port and configure the IP address
1. Add the isolation marker: ip netns add fd 2. P...
Analysis of the difference between absolute path and relative path in HTML
As shown in the figure: There are many files conne...
Html+CSS drawing triangle icon
Let’s take a look at the renderings first: XML/HT...
Linux Centos8 Create CA Certificate Tutorial
Install Required Files Yum install openssl-* -y C...
Some simple implementation codes of the form element take registration as an example
Code implementation: Copy code The code is as fol...
Pitfalls encountered when installing MySQL 5.7.17 compressed version under Windows
First download the latest MySQL 5.7.17 Community ...
JavaScript realizes the effect of mobile modal box
This article example shares the specific code of ...
Detailed explanation of the problem of matching even when there is a space at the end of the string in the Mysql query condition
1. Table structure TABLE person id name 1 you 2 Y...
Solutions to MySQL OOM (memory overflow)
OOM stands for "Out Of Memory", which m...
Don't forget to close the HTML tag
Building web pages that comply with Web standards ...
Markup Languages - Lists Again
Click here to return to the 123WORDPRESS.COM HTML ...
SQL Practice Exercise: Online Mall Database Product Category Data Operation
Online shopping mall database-product category da...
A detailed introduction to wget command in Linux
Table of contents First install wget View Help Ma...