使用electron为贪吃蛇游戏创建全局快捷键

最新推荐文章于 2025-03-04 17:40:58 发布

weixin_30482383

最新推荐文章于 2025-03-04 17:40:58 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smart-girl/p/10329453.html

本文介绍了一个基于Electron框架的简易贪吃蛇游戏实现。通过使用键盘上的上下左右键来控制游戏中的贪吃蛇，玩家可以享受经典的游戏体验。代码中详细展示了如何使用JavaScript和HTML Canvas来创建游戏界面，以及如何通过监听键盘事件来实现贪吃蛇的移动控制。

上图就是我们的简体版贪吃蛇游戏，我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制。
The picture above is our simplified version of Snake Eating Game. We can see that the top
and bottom of the keyboard can control Snake Eating.
所用到的代码如下
The code used is as follows

//这个是对方向进行的控制
//This is direction control.
window.document.onkeydown = function(event) {
  if (!allowPressKeys){
    return null;
  }
  let keyCode;
  if(!event)
  {
    keyCode = window.event.keyCode;
  }
  else
  {
    keyCode = event.keyCode;
  }

  switch(keyCode)
  {
    case 37:
      if (direction !== 'right') {
        moveLeft();
      }
      break;

    case 38:
      if (direction !== 'down'){
        moveUp();
      }
      break;

    case 39:
      if (direction !== 'left'){
        moveRight();
      }
      break;

    case 40:
      if (direction !== 'up'){
        moveDown();
      }
      break;

    default:
      break;
  }
};

app.css
body {
    margin: 1em;
    padding: 0;
    background: #111;
    color: white;
    font-family: helvetica;
  }
  
  canvas {
    border: solid 1px red;
    width: 800px;
    height: 400px;
  }
  
  #scoreboard {
    padding-bottom: 1em;
  }
  
  #label, #score, #bar {
      float: left;
      padding: 8px;
  }
  
  #pause_menu, #restart_menu {
    display: none;
  }

app.js
'use strict';
let currentState;
let canvas, ctx, gridSize, currentPosition, snakeBody, snakeLength, direction, score, suggestedPoint, allowPressKeys, interval, choice;

function updateScore () {
  score = (snakeLength - 3) * 10;
  document.getElementById('score').innerText = score;
}

function hasPoint (element) {
  return (element[0] === suggestedPoint[0] && element[1] === suggestedPoint[1]);
}

function makeFoodItem () {
  suggestedPoint = [Math.floor(Math.random()*(canvas.width/gridSize))*gridSize, Math.floor(Math.random()*(canvas.height/gridSize))*gridSize];
  if (snakeBody.some(hasPoint)) {
    makeFoodItem();
  } else {
    ctx.fillStyle = 'rgb(10,100,0)';
    ctx.fillRect(suggestedPoint[0], suggestedPoint[1], gridSize, gridSize);
  }
}

function hasEatenItself (element) {
  return (element[0] === currentPosition.x && element[1] === currentPosition.y);
}

function leftPosition(){
 return currentPosition.x - gridSize;
}

function rightPosition(){
  return currentPosition.x + gridSize;
}

function upPosition(){
  return currentPosition.y - gridSize;
}

function downPosition(){
  return currentPosition.y + gridSize;
}

function whichWayToGo (axisType) {
  if (axisType === 'x') {
    choice = (currentPosition.x > canvas.width / 2) ? moveLeft() : moveRight();
  } else {
    choice = (currentPosition.y > canvas.height / 2) ? moveUp() : moveDown();
  }
}

function moveUp(){
  if (upPosition() >= 0) {
    executeMove('up', 'y', upPosition());
  } else {
    whichWayToGo('x');
  }
}

function moveDown(){
  if (downPosition() < canvas.height) {
    executeMove('down', 'y', downPosition());
  } else {
    whichWayToGo('x');
  }
}

function moveLeft(){
  if (leftPosition() >= 0) {
    executeMove('left', 'x', leftPosition());
    } else {
    whichWayToGo('y');
  }
}

function moveRight(){
  if (rightPosition() < canvas.width) {
    executeMove('right', 'x', rightPosition());
  } else {
    whichWayToGo('y');
  }
}

function executeMove(dirValue, axisType, axisValue) {
  direction = dirValue;
  currentPosition[axisType] = axisValue;
  drawSnake();
}

function moveSnake(){
  switch (direction) {
    case 'up':
      moveUp();
      break;

    case 'down':
      moveDown();
      break;

    case 'left':
      moveLeft();
      break;

    case 'right':
      moveRight();
      break;
  }
}

function restart () {
    document.getElementById('play_menu').style.display='block';
    document.getElementById('pause_menu').style.display='none';
    document.getElementById('restart_menu').style.display='none';
    pause();
    start();
}

function pause(){
    document.getElementById('play_menu').style.display='none';
    document.getElementById('pause_menu').style.display='block';
  clearInterval(interval);
  allowPressKeys = false;
}

function play(){
    document.getElementById('play_menu').style.display='block';
    document.getElementById('pause_menu').style.display='none';
  interval = setInterval(moveSnake,100);
  allowPressKeys = true;
}

function gameOver(){
  pause();
  window.alert('Game Over. Your score was ' + score);
  ctx.clearRect(0,0, canvas.width, canvas.height);
    document.getElementById('play_menu').style.display='none';
  document.getElementById('restart_menu').style.display='block';
}

function drawSnake() {
  if (snakeBody.some(hasEatenItself)) {
    gameOver();
    return false;
  }
  snakeBody.push([currentPosition.x, currentPosition.y]);
  ctx.fillStyle = 'rgb(200,0,0)';
  ctx.fillRect(currentPosition.x, currentPosition.y, gridSize, gridSize);
  if (snakeBody.length > snakeLength) {
    let itemToRemove = snakeBody.shift();
    ctx.clearRect(itemToRemove[0], itemToRemove[1], gridSize, gridSize);
  }
  if (currentPosition.x === suggestedPoint[0] && currentPosition.y === suggestedPoint[1]) {
    makeFoodItem();
    snakeLength += 1;
    updateScore();
  }
}

window.document.onkeydown = function(event) {
  if (!allowPressKeys){
    return null;
  }
  let keyCode;
  if(!event)
  {
    keyCode = window.event.keyCode;
  }
  else
  {
    keyCode = event.keyCode;
  }

  switch(keyCode)
  {
    case 37:
      if (direction !== 'right') {
        moveLeft();
      }
      break;

    case 38:
      if (direction !== 'down'){
        moveUp();
      }
      break;

    case 39:
      if (direction !== 'left'){
        moveRight();
      }
      break;

    case 40:
      if (direction !== 'up'){
        moveDown();
      }
      break;

    default:
      break;
  }
};

function start () {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  currentPosition = {'x':50, 'y':50};
  snakeBody = [];
  snakeLength = 3;
  updateScore();
  makeFoodItem();
  drawSnake();
  direction = 'right';
  play();
}

function initialize () {
  canvas = document.querySelector('canvas');
  ctx = canvas.getContext('2d');
  gridSize = 10;
  start();
}

function togglePauseState () {
  if (currentState) {
    if (currentState === 'play') {
      pause();
        currentState = 'pause';
    } else {
      play();
        currentState = 'play';
    }
   } else {
     pause();
     currentState = 'play';
   }
}

const ipcRenderer = require('electron').ipcRenderer;

function togglePauseState () {
  if (currentState) {
    if (currentState === 'play') {
      pause();
      currentState = 'pause';
    } else {
      play();
      currentState = 'play';
    }
  } else {
    pause();
    currentState = 'play';
    }
}

ipcRenderer.on('togglePauseState', togglePauseState);

window.onload = initialize;

<html>
  <head>
    <title>Snake</title>
    <link href="app.css" rel="stylesheet" />
    <script src="app.js"></script>
  </head>
  <body>
    <div id="scoreboard">
      <span id="label">Score:</span>
      <span id="score"></span>
            <div id="bar">
                    <div id="play_menu">
                    <button onclick="pause();">Pause</button>
                    </div>
                  <div id="pause_menu">
                    <button onclick="play();">Resume</button>
                        <button onclick="restart();">Restart</button>
                  </div>
                  <div id="restart_menu">
                    <button onclick="restart();">Restart</button>
                  </div>
                </div>
            </div>
    </div>
    <canvas></canvas>
  </body>
</html>

main.js
'use strict';

const {app, globalShortcut, BrowserWindow} = require('electron');

let mainWindow = null;

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 840,
    height: 470,
    useContentSize: true
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on('closed', () => { mainWindow = null; });
  const pauseKey = globalShortcut.register('CommandOrControl+P', () => {
    mainWindow.webContents.send('togglePauseState');
  });
  if (!pauseKey) alert('You will not be able to pause the game from the keyboard');
});

app.on('will-quit', () => {
  globalShortcut.unregister('CommandOrControl+P');
});

{ "name": "snake-electron", "version": "1.0.0", "description": "The Snake game, built with Electron for the book 'Cross Platform Desktop Applications'", "main": "main.js", "scripts": { "start": "node_modules/.bin/electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "electron", "keyboard", "shortcuts" ], "author": "Paul Jensen ", "license": "MIT", "dependencies": { "electron-prebuilt": "^1.2.5" } }

本文的例子学习自 <<跨平台桌面应用开发基于Electron与NW.js>>这本书
by要学的东西很多，我还差很远

转载于:https://www.cnblogs.com/smart-girl/p/10329453.html