个人中心
gpt4 book ai didi

javascript - 如何在单击按钮时更改组件颜色

转载 作者：行者123 更新时间：2023-11-28 18:06:48 26 4
gpt4 key购买 nike

我正在尝试用 JavaScript 制作绘画游戏，但似乎无法更改“PaintBrush”组件的颜色。我想通过一个函数来完成此操作，并让一个按钮在单击时执行该函数。除了如何让画笔改变颜色之外，我已经把所有的事情都解决了。这很复杂，所以请帮忙。这是我的代码:HTML:

<html>
<body onload="startGame()">
<br>
<button onclick="ThickRed()">Thick Red</button>
<button onclick="ThinRed()">Thin Red</button>
<button onclick="ThickYellow()">Thick Yellow</button>
<button onclick="ThinYellow()">Thin Yellow</button>
</html>

CSS:

canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}

Javascript:

document.onkeydown = checkKey;
function startGame() {
GameArena.start();
}
var PaintBrush; 
var GameArena = {
canvas : document.createElement("canvas"),
start : function() {
    this.canvas.width = 1280;
    this.canvas.height = 480;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function startGame() {
GameArena.start();
PaintBrush = new component(30, 30, "red", 10, 320);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y; 
this.color = color;
this.update = function(){
ctx = GameArena.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY; 
} 

}
function updateGameArea() {
PaintBrush.newPos();
PaintBrush.update();
}
function checkKey(e) {

if (e.keyCode == '38') {
    // up arrow
   PaintBrush.speedY -= 1;
}
else if (e.keyCode == '40') {
    // down arrow
  PaintBrush.speedY += 1;
}
else if (e.keyCode == '37') {
   // left arrow
  PaintBrush.speedX -= 1;
}
else if (e.keyCode == '39') {
   // right arrow
  PaintBrush.speedX += 1;
}

}
function ThickYellow() {
PaintBrush.color = Yellow;
}

请帮忙!

最佳答案

我尝试按照您的代码以面向位对象的方式组织代码。

您还可以在 JSfiddle 中找到运行示例 https://jsfiddle.net/rj1405/qa7q0b9m/

为了简单起见，我有一个启动游戏的按钮(您可以在文档加载时替换为)和 2 个按钮，红色和黄色。

<button id="btn">StartGame</button>
<button id="btnRed" >Thick Red</button>
<button id="btnYellow">Thick Yellow</button>

你的CSS，

canvas { border: 1px solid #d3d3d3; background-color: #f1f1f1; }

这是主要的 javascript。

document.onkeydown = checkKey;

// Global variables
var btn = document.getElementById('btn');
var btnYellow = document.getElementById('btnYellow');
var btnRed = document.getElementById('btnRed');
var paintBrush;

// Main GameArena object
var GameArena = {
    canvas : document.createElement("canvas"),
    start : function() {
            this.canvas.width = 1280;
            this.canvas.height = 480;
            this.context = this.canvas.getContext("2d");
         document.body.insertBefore(this.canvas,document.body.childNodes[0]);
            this.interval = setInterval(updateGameArea, 20);
        },
   clear : function() {
    this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
    }
 };

// Paint Brush Constructor
var PaintBrush = function (width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.color = color;
    this.speedX = 0;
    this.speedY = 0;

    this.update = function(){
        ctx = GameArena.context;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };

   this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY; 
    };
 }

 PaintBrush.prototype.setColor = function(color){
     this.color = color;
     this.update();
 };  


// On click Button events
 btn.onclick = function(e) {
    GameArena.start();
    paintBrush = new PaintBrush(30, 30, "red", 10, 320);
 };

 btnYellow.onclick = function(e) {
    paintBrush.setColor('yellow');
 };

 btnRed.onclick = function(e) {
    paintBrush.setColor('red');
 };

 // Other methods
 function updateGameArea() {
    paintBrush.newPos();
    paintBrush.update();
 }

 function checkKey(e) {
     if (e.keyCode == '38') {
       paintBrush.speedY -= 1;
     }
     else if (e.keyCode == '40') {
       paintBrush.speedY += 1;
     }
     else if (e.keyCode == '37') {
       paintBrush.speedX -= 1;
     }
     else if (e.keyCode == '39') {
       paintBrush.speedX += 1;
     }
 }

请注意，我使用了全局变量。此代码解决了您的问题，但可以通过多种方式即兴发挥。

关于javascript - 如何在单击按钮时更改组件颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42402189/

26 4 0
文章推荐： PYTHON:最适合每个x值的多个y值的线
文章推荐： iphone - [NSMutableData data] 和 [[NSMutableData alloc]init] 的区别
文章推荐： ios - NSURLConnection 下载进度
文章推荐： javascript - 在 V8 中，为什么预分配数组消耗更少的内存？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com