My take on this game [RPS in JS]

[microrockstar46023]

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

Hi, everyone! I just finished my take on this game. Below you can find the html code and the JavaScript code for the game. I would love if someone had a read through and found something that was badly written or redundant.

Thanks!
<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

``` HTML Game

Javascript named it script.js

var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
var fps = 30;
var winText = " ";
var computerChoice = " “;
var userChoice =” ";
var computerText;
var playerText;
var rectRock = {
x: 20,
y: 10,
width: 60,
heigth: 20
};
var rectPaper = {
x: 20,
y: 50,
width: 60,
heigth: 20
};
var rectScissors = {
x: 20,
y: 90,
width: 60,
heigth: 20
};

canvas.onselectstart = function () { return false; }

function capitalizeFirstLetter(string) {
“use strict”;
return string.charAt(0).toUpperCase() + string.slice(1);
}

function rockBoxText() {
“use strict”;
context.fillStyle = “blue”;
context.font = “30px Garamond”;
context.fillText(“Rock”, 100, 30);
context.fillRect(20, 10, 60, 20);
}

function paperBoxText() {
“use strict”;
context.fillStyle = “red”;
context.font = “30px Garamond”;
context.fillText(“Paper”, 100, 70);
context.fillRect(20, 50, 60, 20);
}

function scissorsBoxText() {
“use strict”;
context.fillStyle = “green”;
context.font = “30px Garamond”;
context.fillText(“Scissors”, 100, 110);
context.fillRect(20, 90, 60, 20);
}

//Function to check whether a point is inside a rectangle
function isInside(pos, rect) {
“use strict”;
return pos.x > rect.x && pos.x < rect.x + rect.width && pos.y < rect.y + rect.heigth && pos.y > rect.y;
}
//Function to get the mouse position
function getMousePos(canvas, event) {
“use strict”;
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
};
}

//Function that checks if the player won or the computer.
function compare (choice1, choice2) {
“use strict”;
if (choice1 === choice2) {
winText =“It’s a tie!”;

} else if (choice1 === "rock") {
    if (choice2 === "scissors") {
        winText = "You win!"

    } else {
        winText = "You lose!";
    }
} else if (choice1 === "paper") {
    if (choice2 === "rock") {
        winText = "You win!";
    } else {
        winText = "You lose!";
    }
} else if (choice1 === "scissors") {
    if (choice2 === "rock") {
        winText = "You lose!";
    } else {
        winText = "You win!";
    }
}

};

function generateComChoice () {
computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = “rock”;
} else if(computerChoice <= 0.67) {
computerChoice = “paper”;
} else {
computerChoice = “scissors”;
}
};

function comChoice(){

if (canvas.addEventListener) {
	canvas.addEventListener ("click", function (evt) {
     var mousePos = getMousePos(canvas, evt);
if (isInside(mousePos, rectRock)) {
    generateComChoice();
} else if (isInside(mousePos, rectPaper)) {
    generateComChoice();
} else if (isInside(mousePos, rectScissors)) {
    generateComChoice();
} else {
}
    }, false);
}

};

function playerChoice (){
“use strict”;
if (canvas.addEventListener) {
canvas.addEventListener(‘click’, function (evt) {
var mousePos = getMousePos(canvas, evt);
if (isInside(mousePos, rectRock)) {
userChoice = “rock”;
} else if (isInside(mousePos, rectPaper)) {
userChoice = “paper”;
} else if (isInside(mousePos, rectScissors)) {
userChoice = “scissors”;
} else {
}

}, false);

}

};

function checkIfWin (){
if (userChoice === “rock” || userChoice === “paper” || userChoice === “scissors”) {
compare(userChoice, computerChoice);
} else {}
};

function update (){
comChoice();
playerChoice();
checkIfWin();

};

function render (){
context.clearRect(0, 0, canvas.width, canvas.height);
rockBoxText();
paperBoxText();
scissorsBoxText();
context.font = “15px Georgia”;
if (computerChoice === “rock”) context.fillStyle = “blue”;
else if (computerChoice === “paper”) context.fillStyle = “red”;
else if (computerChoice === “scissors”) context.fillStyle = “green”;
else context.fillStyle =“white”;
computerText = context.fillText("Computer Choice: " + capitalizeFirstLetter(computerChoice.toString()), 10, 195);
if (userChoice === “rock”) context.fillStyle = “blue”;
else if (userChoice === “paper”) context.fillStyle = “red”;
else if (userChoice === “scissors”) context.fillStyle = “green”;
else context.fillStyle =“white”;
playerText = context.fillText("Your choice: " + capitalizeFirstLetter(userChoice.toString()), 10, 175);
context.fillStyle = “black”;
context.fillText(winText, 10, 150);
};

function game (){
update();
render();
};

setInterval (function() {
game();
}, 1000/fps);

<do not remove the three backticks above>

[rhyscrypto]

This is really cool.

I think this is the first time I’ve seen someone take one of the games/exercises from here and put it into an html doc.

You have a few unnecessary semicolons, but other than that I think it looks good.

Good job! I’m sure you’ll go far if you keep up the ambition and skills.

Here’s an idea, though. Instead of colored boxes, make it a picture or whatever of the item.

[stetim94]

super cool

i put the code in a bin: http://jsbin.com/yajixetanu/edit?html,js,output

this way, anyway can super simply run the code and see and modify it if they have suggestions I will look over it later, why did you use canvas? Just curious

[microrockstar46023]

Thanks for the response and the nice words!

I’m going to polish it soon and remove what’s unnecessary, thanks!

That’s a great idea, I think I will try that next now

[rhyscrypto]

Please post the finished one.

If you were so inclined, you could use github pages to host your game and/or code.

[microrockstar46023]

Thanks for the response!

Thanks for putting it in a bin!

Canvas was the first thing that I came across when searching the web, what’s the better alternative?

[rhyscrypto]

My last critique would be that it only runs the script when the box is hit.

You should make it to where it runs even if the text were hit, for simplicity and more flexibility.

[microrockstar46023]

I will! I’ve created a webpage where I’m going to have all my projects posted and this one you can find on www.gamesquestionmark.com. under Project I.

[microrockstar46023]

I can implement that as well, thanks for the input!

[stetim94]

i would personally simply use ` to let the user choice and textContent to insert the result into paragraph elements.

[microrockstar46023]

I’ll have to look up textContent. I’m unsure if your text was supposed to show only the apostrophe. Thanks a lot!

[microrockstar46023]

Script now runs when text is hit: http://jsbin.com/zimusulefa/edit?html,js,output

Your input helps a lot!

[microrockstar46023]

I have now added sprites to the game instead of boxes. Thanks again for the input!
http://gamesquestionmark.com/ProjectI/ProjectI.html

var img = new Image();
img.src = "sprites/size2.png";
var img2 = new Image();
img2.src = "sprites/paper2.png";
var img3 = new Image();
img3.src = "sprites/scissors2.png";

var rockSprite = {
    spriteWidth: 200,
    spriteHeight: 200,
    pixelsLeft: 0,
    pixelsTop: 0,


    canvasPosX: 35,
    canvasPosY: 5
};

var paperSprite = {
    spriteWidth:  200,
    spriteHeight: 200,
    pixelsLeft: 0,
    pixelsTop: 0,

    canvasPosX: 35,
    canvasPosY: 45
};

var scissorsSprite = {
    spriteWidth:  200,
    spriteHeight: 200,
    pixelsLeft: 0,
    pixelsTop: 0,

    canvasPosX: 35,
    canvasPosY: 90
};


function addSprite (type, source) {
context.drawImage(source,
    type.pixelsLeft,
    type.pixelsTop,
    type.spriteWidth,
    type.spriteHeight,
    type.canvasPosX,
    type.canvasPosY,
    type.spriteWidth,
    type.spriteHeight);
};
function render (){
    addSprite(rockSprite, img);
    addSprite(paperSprite, img2);
    addSprite(scissorsSprite, img3);
};