Только начинаю изучать эти темы,ниже код программы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer=""></script>
<title>Курсовая работа</title>
</head>
<body>
<canvas id="canvas" width="650" height="650"></canvas>
<div id="keyUp"></div>
<div id="middle">
<div id="keyLeft"></div>
<div id="keyCenter"></div>
<div id="keyRight"></div>
</div>
<div class="clear"></div>
<div id="keyDown"></div>
<div class="settings">
<label><input id="through_walls" type="checkbox">Прохождение сквозь стены</label>
<div class="image">
<img src="score.png" width="200" height="200" alt="score"/>
<div id="score"></div>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="game-over" id="text">Конец игры</p>
<p class="game-over" id="result"></p>
</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: #000;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.clear{
clear: both;
}
/*Фон*/
body{
background-image: url(bg.jpg);
-webkit-background-size: cover;
background-size: cover;
}
/*Часть,где происходит игра*/
#canvas{
width: 650px;
height: 650px;
display: block;
margin: 30px auto;
border: 1px solid #000;
border-radius: 5px;
background-image: url(1.jpg);
-webkit-background-size: cover;
background-size: cover;
}
/*Стрелка вверх*/
#keyUp{
width: 70px;
height: 70px;
background-image: url(u.png);
-webkit-background-size: cover;
background-size: cover;
right: 335px;
top: 267px;
}
/*Стрелка вниз*/
#keyDown{
width: 70px;
height: 70px;
background-image: url(d.png);
-webkit-background-size: cover;
background-size: cover;
right: 335px;
top: 367px;
}
/*Стрелка влево*/
#keyLeft{
width: 70px;
height: 70px;
background-image: url(l.png);
-webkit-background-size: cover;
background-size: cover;
right: -1350px;
top: -430px;
}
/*Стрелка вправо*/
#keyRight{
width: 70px;
height: 70px;
background-image: url(r.png);
-webkit-background-size: cover;
background-size: cover;
right: -1450px;
top: -430px;
}
/*Перезапуск игры*/
#keyCenter{
width: 100px;
height: 100px;
background-image: url(restart.png);
-webkit-background-size: cover;
background-size: cover;
right: 40px;
bottom: 40px;
}
/*Положение кнопок*/
#keyLeft, #keyRight{
float: left;
position: absolute;
}
#keyUp, #middle, #keyDown{
margin: 20px auto;
position: absolute;
}
#middle{
width: 170px;
}
#keyCenter{
background-image: url(restart.png);
-webkit-background-size: cover;
background-size: cover;
position: absolute;
}
.image{
position: relative;
bottom: 700px;
right: 500px;
}
#score{
position: absolute;
top: 50px;
left: 873px;
font-weight: normal;
font-family: comic sans ms,sans-serif;
}
/*Класс настройки*/
}
.settings{
position: absolute;
display: inline-block;
width: 650px;
}
/*Прожождение через стены*/
#through_walls{
position: relative;
transform:scale(2.5);
opacity:0.9;
top: -7px;
right: 10px;
cursor:pointer;
}
/*Определяет стиль элемента при наведении на него курсора мыши*/
label:hover{
cursor: pointer;
}
/*Модальное окно*/
.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,1,0,0.8);
}
.modal-content{
position: relative;
background-image: url(bg.jpg);
margin: 15% auto;
padding: 5px;
border: 1px solid #888;
width: 80%;
border-radius: 10px;
}
/*Класс закрывающий*/
.close{
transform:scale(2.5);
color: #aaa;
position: absolute;
right: 15px;
top: 10px;
float: right;
font-size: 30px;
font-weight: bold;
}
.close:hover{
cursor: pointer;
}
/*Конец игры*/
.game-over{
font-family:Palatino Linotype,sans-serif;
z-index: 2;
font-size: 50px;
color: #000;
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var keyUp =document.getElementById('keyUp');
var keyLeft =document.getElementById('keyLeft');
var keyRight =document.getElementById('keyRight');
var keyDown =document.getElementById('keyDown');
var modal = document.getElementById('myModal');
var btn = document.getElementById('myBtn');
var span = document.getElementsByClassName("close")[0];
through_walls.checked = "checked";
var snake = [{x:10, y:10}];
var fruit = {};
var score = 0;
var dir = '';
var accessKeyboard=true;
var timer = 300;
createFruit();
game();
function game(){
accessKeyboard=true;
ctx.clearRect(0, 0, 650, 650);
testCollision() // столкновение с фруктом
drawFruit();
drawSnake();
aboutCollision(); // кусает себя
drawScore();
setTimeout('game()', timer);
}
//Перезапуск игры
function restartGame(){
dir='';
snake = [{x:10, y:10}];
createFruit();
score=0;
}
//Если кусает себя
function aboutCollision(){
if(snake.length>4){
var x=snake[0].x;
var y=snake[0].y;
for(var i=4; i<snake.length; i++){
if(x==snake[i].x && y==snake[i].y){
openModal();
restartGame();
}
}
}
}
//Увеличение длины
function addSnake(){
var x=snake[0].x;
var y=snake[0].y;
if(dir=='left') x-=1;
if(dir=='right') x+=1;
if(dir=='up') y-=1;
if(dir=='down') y+=1;
var obj={};
obj.x = x;
obj.y = y;
snake.unshift(obj);
createFruit();
score++;
}
//Столкновение змейки с фруктом
function testCollision(){
var x=snake[0].x;
var y=snake[0].y;
if(dir=='left') x-=1;
if(dir=='right') x+=1;
if(dir=='up') y-=1;
if(dir=='down') y+=1;
if(fruit.x==x && fruit.y==y){
addSnake();
return;
}
stepSnake();
}
//Обновление счета
function drawScore(){
var board = document.getElementById('score');
board.innerHTML = 'Счет: '+score;
}
//Передвижение змейки
function stepSnake(){
var x=0;
var y=0;
var obj={};
obj.x=snake[0].x;
obj.y=snake[0].y;
if(dir=='left') {
x-=1;
}
if(dir=='right') x+=1;
if(dir=='up') y-=1;
if(dir=='down') y+=1;
obj.x = wallCollision(obj.x+x);
obj.y = wallCollision(obj.y+y);
if(dir){
snake.pop();
snake.unshift(obj);
}
}
//Функция проверяет на столкновение со стеной
function wallCollision(val){
if(through_walls.checked){
if(val<0) val=20;
if(val>20) val=0;
}
else{
if(val<0 || val>20){
openModal();
restartGame();
}
}
return val;
}
//Направление движения змейки при нажатии на клавиатуру
document.onkeydown = function(event){
if(accessKeyboard){
if(event.keyCode==65 && dir!='right') dir='left';
if(event.keyCode==87 && dir!='down') dir='up';
if(event.keyCode==68 && dir!='left') dir='right';
if(event.keyCode==83 && dir!='up') dir='down';
if(event.keyCode==82) restartGame();
accessKeyboard=false;
}
}
//Отрисовка фрукта
function drawFruit(){
var blockSize = 10;
var x = fruit.x*30 +2;
var y = fruit.y*30 +2;
ctx.fillStyle = '#0dee19';
ctx.fillRect(x, y, 28, 28);
}
//Создание фрукта
function createFruit(){
var x = Math.floor(Math.random()*21);
var y = Math.floor(Math.random()*21);
for(var i=0; i<snake.length; i++){
if(x==snake[i].x && y==snake[i].y){
createFruit();
return;
}
}
fruit.x = x;
fruit.y = y;
}
//Отрисовка змейки
function drawSnake() {
ctx.fillStyle = '#e10cf0';
for(var i=0; i<snake.length; i++) {
var x = snake[i].x*30 + 2;
var y = snake[i].y*30 + 2;
ctx.fillRect(x, y, 28, 28);
}
}
//Обработка нажатия на элементы экрана
keyUp.onclick = function(){
if(accessKeyboard && dir!='down'){
dir='up';
accessKeyboard=false;
}
}
keyDown.onclick = function(){
if(accessKeyboard && dir!='up'){
dir='down';
accessKeyboard=false;
}
}
keyLeft.onclick = function(){
if(accessKeyboard && dir!='right'){
dir='left';
accessKeyboard=false;
}
}
keyRight.onclick = function(){
if(accessKeyboard && dir!='left'){
dir='right';
accessKeyboard=false;
}
}
keyCenter.onclick = function(){
dir='';
snake = [{x:10, y:10}];
createFruit();
score=0;
}
//Модальное окно
function openModal() {
modal.style.display = "block";
result.innerHTML = "Ваш счет: "+score+"!";
}
span.onclick = function closeModal() {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal){
modal.style.display = "none";
}
}
/code>
Простой
